<!--考勤管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">

      <el-menu mode="horizontal" router :default-active="$route.path">

        <el-menu-item index="/checking_set">班次设置</el-menu-item>
        <el-menu-item index="/checking_group">考勤组设置</el-menu-item>
        <el-menu-item index="/checking_vocation">假期设置</el-menu-item>
      </el-menu>
  </div>
  <!-- 班次列表 -->
  <el-card style="margin:20px;">
    <div style="display: flex;justify-content: space-between;">
      <span>班次列表</span>
      <div>
        <el-button type="primary" @click="beforeAddSet" >新增班次</el-button>
      </div>
    </div>
<!--    新增班次弹窗-->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form>
        <el-form-item label="班次名称">
          <el-input placeholder="请输入" v-model="saveSetForm.className"></el-input>
        </el-form-item>
        <el-form-item label="打卡时间">
          <el-select placeholder="请选择" v-model="saveSetForm.startTime">
            <el-option label="一天一次上下班" value="1"></el-option>
            <el-option label="一天两次上下班" value="2"></el-option>
            <el-option label="一天三次上下班" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="休息时间" >
          <el-date-picker
              type="datetimerange"
              v-model="times"
              start-placeholder="开始"
              end-placeholder="结束"
              range-separator="到"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              @change="console.log(times)"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveSet">确 定</el-button>
      </template>
    </el-dialog>
    <el-table :data="setArr">
      <el-table-column type="index" label="序号" width="80" align="center"/>
      <el-table-column prop="brand" label="班次名称" align="center"/>
      <el-table-column prop="license" label="考勤时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editCheckingSum(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteCheckingSum(scope.row.id)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {ref} from "vue";

const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增班次');
const beforeAddSet = () => {
  dialogVisible.value = true;
  dialogTitle.value = '新增班次';
  console.log(dialogTitle.value);
}
const times = ref([])
const saveSetForm=ref({
className:'',//班次名称
  //打卡时间
  startTime:'',
  //休息时间
  restTime:'',
})
//保存班次内容
const saveSet = ()=>{

}
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}
const setArr = ref([])
const editCheckingSum = (id)=>{

}
//定义删除指定职位管理的方法
const deleteCheckingSum = (id)=>{

}


</script>